<template>
  <div id="centreBottom1">
    <div class="bg-color-black">
      <div class="d-flex pt-2 pl-2">
        <div class="d-flex">
          <span class="fs-xl text mx-2">视频事件清单</span>
        </div>
      </div>
      <div class="d-flex jc-center body-box">
        <dv-scroll-board :config="config" class="scroll-board"/>
      </div>
    </div>
  </div>
</template>

<script>
import { parseTime } from '@/utils/index'

export default {
  name: 'Event',
  props: {
    eventVideos: {
      type: Array,
      default: () => Array
    }
  },
  data () {
    return {
      config: {
        header: ['时间', '公路位置', '事件描述'],
        data: [
          /*   ['2020-7-1 10:00:00', '武汉', '拥堵'],
              ['2020-7-2 10:00:00', '武汉', '拥堵'],
              ['2020-7-3 10:00:00', '武汉', '拥堵'],
              ['2020-7-4 10:00:00', '武汉', '拥堵'],
              ['2020-7-4 10:00:00', '武汉', '拥堵'],
              ['2020-7-4 10:00:00', '武汉', '拥堵'],
              ['2020-7-4 10:00:00', '武汉', '拥堵'] */

        ],
        rowNum: 4, // 表格行数
        headerHeight: 35,
        headerBGC: 'transparent', // 表头
        oddRowBGC: '#28293f', // 奇数行
        evenRowBGC: 'transparent', // 偶数行
        columnWidth: [200],
        align: ['center']
      },
      eventList: [
        {
          id: 1,
          name: '事故'
        },
        {
          id: 2,
          name: '路障 '
        },
        {
          id: 3,
          name: '维护 '
        },
        {
          id: 4,
          name: '其他'
        }
      ]

    }
  },
  created () {
    this.initData()
  },
  watch: {
    eventVideos (newV, oldV) {
      if (newV === null) {
        return
      }
      var result = []
      for (var i = 0; i < newV.length; i++) {
        var temp = []
        temp.push(parseTime(newV[i].eventTime))
        temp.push(newV[i].name)
        temp.push(newV[i].eventDesc)
        result.push(temp)
      }
      // console.log(result)
      this.initData()
      // console.log(this.config.data)
    }
  },
  methods: {
    initData () {
      if (this.eventVideos === null) {
        return
      }
      var result = []
      for (var i = 0; i < this.eventVideos.length; i++) {
        var temp = []
        temp.push(parseTime(this.eventVideos[i].eventTime))
        temp.push(this.eventVideos[i].name)
        temp.push(this.eventVideos[i].eventDesc)
        result.push(temp)
      }
      // console.log(result)
      this.config = {
        header: ['时间', '公路位置', '事件描述'],
        data: result,
        rowNum: 5, // 表格行数
        headerHeight: 35,
        headerBGC: 'transparent', // 表头
        oddRowBGC: '#28293f4C', // 奇数行
        evenRowBGC: 'transparent', // 偶数行
        columnWidth: [190, 250, 120],
        align: ['center']
      }
    },
    getEventTypeName (id) {
      let typeName = ''
      if (id == null || id === '' || !this.eventList) return typeName
      this.eventList.some(function (item) {
        if (item.id === id) {
          typeName = item.name
          return true
        }
      })
      return typeName
    }
  }
}
</script>

<style lang="less" scoped>
  #centreBottom1 {
    height: 100%;
    width: 100%;
    border-radius: 5px;

    .bg-color-black {
      height: 100%;
      border-radius: 2px;
    }

    .text {
      color: white;
      font-size: 15px;
      margin-left: 10px;
      font-weight: bolder;

    }

    .body-box {
      border-radius: 2px;
      overflow: hidden;
    }

    .dv-scroll-board .header {
      font-size: 20px;
      font-weight: bolder;
    }

    .scroll-board {
      width: 100%;
      height: 235px;
    }
  }

</style>
